<template>
  <el-menu :default-active="activeIndex"
           class="el-menu-demo"
           mode="horizontal"
           background-color="green"
           text-color="#fff"
           active-text-color="yellow"
           @select="handleSelect">
    <el-menu-item index="index">首页</el-menu-item>
    <el-sub-menu index="1">
      <template #title>技术服务</template>
      <el-sub-menu index="2">
        <template #title>数据统计</template>
        <el-menu-item index="IndoorTemperatureAndHumidity">室内温湿度</el-menu-item>
        <el-menu-item index="SoilTemperatureAndHumidity">土壤温湿度</el-menu-item>
        <el-menu-item index="Light">光照</el-menu-item>
        <el-menu-item index="CarbonDioxide">二氧化碳</el-menu-item>
        <el-menu-item index="BladeTemperatureAndHumidity">叶面温湿度</el-menu-item>
        <el-menu-item index="RainFall">降雨量</el-menu-item>
        <el-menu-item index="WindSpeed">风速/风向</el-menu-item>
        <el-menu-item index="Conductivity">电导率</el-menu-item>
        <el-menu-item index="PH">酸碱度</el-menu-item>
        <el-menu-item index="NitrogenContent">氮含量</el-menu-item>
        <el-menu-item index="PhosphorusContent">磷含量</el-menu-item>
        <el-menu-item index="PotassiumContent">钾含量</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="monitor">在线监控</el-menu-item>
      <el-menu-item index="manage">云录制管理</el-menu-item>
      <el-menu-item index="task">任务管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>种植服务</template>
      <el-menu-item index="IndoorTemperatureAndHumidity">土壤监测</el-menu-item>
      <el-menu-item index="SoilTemperatureAndHumidity">我要种苗</el-menu-item>
      <el-menu-item index="Light">我要农贸</el-menu-item>
      <el-menu-item index="CarbonDioxide">我要记录</el-menu-item>
      <el-menu-item index="BladeTemperatureAndHumidity">产品监测</el-menu-item>
      <el-menu-item index="RainFall">我要开证</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>购销服务</template>
      <el-menu-item index="IndoorTemperatureAndHumidity">我要订单</el-menu-item>
      <el-menu-item index="SoilTemperatureAndHumidity">我要品牌</el-menu-item>
      <el-menu-item index="Light">我要销售</el-menu-item>
      <el-menu-item index="CarbonDioxide">我要开票</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>政策服务</template>
      <el-menu-item index="IndoorTemperatureAndHumidity">优农政策</el-menu-item>
      <el-menu-item index="SoilTemperatureAndHumidity">我要贷款</el-menu-item>
      <el-menu-item index="Light">我要保险</el-menu-item>
      <el-menu-item index="CarbonDioxide">项目申报</el-menu-item>
      <el-menu-item index="CarbonDioxide">我要求助</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="aboutUs">关于我们</el-menu-item>

    <div class="flex-grow"/>

    <el-sub-menu index="12">
      <template #title>主体信息</template>
      <el-menu-item index="history">入驻</el-menu-item>
      <el-menu-item index="2-2">我的果园</el-menu-item>
      <el-menu-item index="2-2">我的码</el-menu-item>
      <el-menu-item index="2-2">我的积分</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const emit = defineEmits(['changeContent'])
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  emit('changeContent', key)
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
